<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>录播直播test</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="dist/css/barrager.css">
    <link rel="stylesheet" type="text/css" href="static/pick-a-color/css/pick-a-color-1.2.3.min.css">
    <link type="text/css" rel="stylesheet" href="static/syntaxhighlighter/styles/shCoreDefault.css"/>
</head>
<body  class="bb-js">
<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.barrager.min.js"></script>
<script type="text/javascript" src="./player_old/js/swfobject.js"></script>
<div class="video" id="CuPlayer"> <b> <img src="./player_old/images/loading.gif" /> 网页视频播放器加载中，请稍后...</b> </div>
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="col-sm-6">
            <input class="form-control" id="info" name="info" type="text" placeholder="弹幕文字信息"/>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" ></label>
            <div class="col-sm-3">
                <button  class="btn btn-primary   bb-light-blue"  onclick="run()"> 运行</button>
            </div>
            <div class="col-sm-3">
                <button  class="btn btn-warning   "  onclick="clear_barrage()"> 清除</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 该直播组件依赖浏览器的flash，必须开启flash才能看到效果
    var so = new SWFObject("./player_old/player.swf","ply","980","460","9","#000000");
    so.addParam("allowfullscreen","true");
    so.addParam("allowscriptaccess","always");
    so.addParam("wmode","opaque");
    so.addParam("quality","high");
    so.addParam("salign","lt");
    <!-- HTML代码参数/Begin -->
    //todo 需要根据实际修改
    so.addVariable("JcScpServer","rtmp://192.168.199.229/live"); //rtmp流媒体服务器地址
    //todo 需要根据实际修改
    so.addVariable("JcScpVideoPath","livestream"); //文件地址
    so.addVariable("JcScpImg","./player_old/images/startpic.jpg"); //视频缩略图
    so.addVariable("JcScpFile","./player_old/CuSunV4set.xml"); //配置文件
    <!-- HTML代码参数/End -->
    so.write("CuPlayer");

    // 实现弹幕
    function run() {
        var danmu = $("#info").val();
        //todo 需要根据实际修改
        var ws = new WebSocket("ws://192.168.199.229:9502");
        ws.onopen = function () {
            console.log("握手成功！");
            ws.send(danmu);
        };
        ws.onmessage = function (e) {
            console.log("message:"+e.data);
            // 需要把json字符串，转换为json对象
            $('body').barrager(JSON.parse(e.data));
            console.log(typeof e.data);
        };
        ws.onerror = function(e){
            console.log("error" .e);
        };
    }

    function  clear_barrage(){

        $.fn.barrager.removeAll();
    }
</script>
</body>
</html>